<template>
  <div class="payment-container">
    <!-- 页面头部 -->
    <div class="payment-header">
      <div class="header-content">
        <div class="header-icon">
          <Icon icon="ep:credit-card" />
        </div>
        <div class="header-info">
          <h1 class="page-title">订单支付</h1>
          <p class="page-subtitle">请确认订单信息并完成支付</p>
        </div>
      </div>
    </div>

    <!-- 倒计时提醒 -->
    <div class="countdown-alert">
      <div class="alert-icon">
        <Icon icon="ep:clock" />
      </div>
      <div class="alert-content">
        <span class="alert-text">请在</span>
        <div class="countdown-time">
          <span class="time-number">{{ minutes.toString().padStart(2, '0') }}</span>
          <span class="time-unit">分</span>
          <span class="time-number">{{ seconds.toString().padStart(2, '0') }}</span>
          <span class="time-unit">秒</span>
        </div>
        <span class="alert-text">内完成支付</span>
      </div>
    </div>

    <div class="payment-content">
      <!-- 订单信息 -->
      <div class="info-section">
        <div class="section-header">
          <div class="section-icon">
            <Icon icon="ep:document" />
          </div>
          <h2 class="section-title">订单信息</h2>
        </div>

        <div class="info-card">
          <div class="info-grid">
            <div class="info-item">
              <div class="item-icon">
                <Icon icon="ep:document-copy" />
              </div>
              <div class="item-content">
                <span class="item-label">订单编号</span>
                <span class="item-value">{{ preOrderInfo.preOrderNo }}</span>
              </div>
            </div>

            <div class="info-item">
              <div class="item-icon">
                <Icon icon="ep:box" />
              </div>
              <div class="item-content">
                <span class="item-label">产品名称</span>
                <span class="item-value">{{ preOrderInfo.productInfo.name }}</span>
              </div>
            </div>

            <div class="info-item">
              <div class="item-icon">
                <Icon icon="ep:scale-to-original" />
              </div>
              <div class="item-content">
                <span class="item-label">产品规格</span>
                <span class="item-value"
                  >{{ preOrderInfo.skuInfo.num }}{{ preOrderInfo.productInfo.unit }}</span
                >
              </div>
            </div>

            <div class="info-item">
              <div class="item-icon">
                <Icon icon="ep:clock" />
              </div>
              <div class="item-content">
                <span class="item-label">有效时间</span>
                <span class="item-value">
                  {{
                    preOrderInfo.skuInfo.expireTime == 0
                      ? '永久'
                      : preOrderInfo.skuInfo.expireTime + '天'
                  }}
                </span>
              </div>
            </div>

            <div class="info-item">
              <div class="item-icon">
                <Icon icon="ep:user" />
              </div>
              <div class="item-content">
                <span class="item-label">适用员工</span>
                <span class="item-value">{{ preOrderInfo.usernameList }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 价格信息 -->
      <div class="info-section">
        <div class="section-header">
          <div class="section-icon">
            <Icon icon="ep:money" />
          </div>
          <h2 class="section-title">价格明细</h2>
        </div>

        <div class="price-card">
          <div class="price-item">
            <span class="price-label">订单总价</span>
            <span class="price-value original-price">¥{{ preOrderInfo.totalPrice }}</span>
          </div>

          <div class="price-item discount-item">
            <span class="price-label">
              <Icon icon="ep:discount" class="discount-icon" />
              订单优惠
            </span>
            <div class="discount-details">
              <div class="discount-line">
                <span class="discount-type">限时优惠</span>
                <span class="discount-amount">-¥{{ preOrderInfo.couponPrice }}</span>
              </div>
              <div class="discount-line" v-if="preOrderInfo.moreCouponPrice > 0">
                <span class="discount-type">其他优惠</span>
                <span class="discount-amount">-¥{{ preOrderInfo.moreCouponPrice }}</span>
              </div>
            </div>
          </div>

          <div class="price-divider"></div>

          <div class="price-item final-price">
            <span class="price-label">支付金额</span>
            <span class="price-value pay-price">¥{{ preOrderInfo.payPrice }}</span>
          </div>
        </div>
      </div>

      <!-- 发货信息 -->
      <div class="info-section">
        <div class="section-header">
          <div class="section-icon">
            <Icon icon="ep:truck" />
          </div>
          <h2 class="section-title">发货信息</h2>
        </div>

        <div class="delivery-card">
          <div class="delivery-type">
            <div class="delivery-icon">
              <Icon :icon="preOrderInfo.deliveryType == 2 ? 'ep:truck' : 'ep:cloudy'" />
            </div>
            <div class="delivery-info">
              <span class="delivery-method">
                {{ preOrderInfo.deliveryType == 2 ? '物流发货' : '虚拟发货' }}
              </span>
              <span class="delivery-desc">
                {{ preOrderInfo.deliveryType == 2 ? '商品将通过物流配送' : '服务将自动开通' }}
              </span>
            </div>
          </div>

          <div v-if="preOrderInfo.deliveryType == 2" class="address-info">
            <div class="address-item">
              <Icon icon="ep:user" class="address-icon" />
              <span class="address-label">收件人：</span>
              <span class="address-value">{{ preOrderInfo.receiver }}</span>
            </div>

            <div class="address-item">
              <Icon icon="ep:phone" class="address-icon" />
              <span class="address-label">联系方式：</span>
              <span class="address-value">{{ preOrderInfo.mobile }}</span>
            </div>

            <div class="address-item">
              <Icon icon="ep:location" class="address-icon" />
              <span class="address-label">收货地址：</span>
              <div class="address-cascader">
                <el-cascader
                  v-model="preOrderInfo.areaId"
                  :options="areaList"
                  :props="defaultProps"
                  disabled
                  placeholder="收货地址"
                />
              </div>
            </div>

            <div class="address-item">
              <Icon icon="ep:map-location" class="address-icon" />
              <span class="address-label">详细地址：</span>
              <span class="address-value">{{ preOrderInfo.detailAddress }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 支付方式 -->
      <div class="info-section">
        <div class="section-header">
          <div class="section-icon">
            <Icon icon="ep:wallet" />
          </div>
          <h2 class="section-title">支付方式</h2>
        </div>

        <div class="payment-methods">
          <el-radio-group v-model="createPayParams.payType" class="payment-radio-group">
            <!-- 余额支付 -->
            <div v-if="preOrderInfo.productInfo.code != 'wallet'" class="payment-option">
              <el-radio :label="1" class="payment-radio">
                <div class="payment-method">
                  <div class="method-icon wallet-icon">
                    <Icon icon="ep:wallet" />
                  </div>
                  <div class="method-info">
                    <span class="method-name">钱包余额</span>
                    <span class="method-desc">当前余额：¥{{ preOrderInfo.wallet }}</span>
                  </div>
                  <div class="method-status">
                    <span
                      v-if="preOrderInfo.wallet >= preOrderInfo.payPrice"
                      class="status-sufficient"
                    >
                      <Icon icon="ep:check" />
                      余额充足
                    </span>
                    <span v-else class="status-insufficient">
                      <Icon icon="ep:warning" />
                      余额不足
                    </span>
                  </div>
                </div>
              </el-radio>
            </div>

            <!-- 其他支付方式 -->
            <div
              v-for="channel in paymentOptions.filter((v) => v.enable)"
              :key="channel.id"
              class="payment-option"
            >
              <el-radio :label="channel.id" class="payment-radio">
                <div class="payment-method">
                  <div class="method-icon" :class="getPaymentIconClass(channel.type)">
                    <Icon :icon="getPaymentIcon(channel.type)" />
                  </div>
                  <div class="method-info">
                    <span class="method-name">{{ channel.name }}</span>
                    <span class="method-desc">{{ getPaymentDesc(channel.type) }}</span>
                  </div>
                  <div class="method-status">
                    <Icon icon="ep:right" class="arrow-icon" />
                  </div>
                </div>
              </el-radio>
            </div>
          </el-radio-group>
        </div>
      </div>
    </div>

    <!-- 支付按钮 -->
    <div class="payment-footer">
      <div class="footer-content">
        <div class="payment-summary">
          <span class="summary-label">应付金额：</span>
          <span class="summary-amount">¥{{ preOrderInfo.payPrice }}</span>
        </div>
        <el-button
          type="primary"
          size="large"
          @click="onCreatePayOrder"
          :disabled="!canSubmit"
          :loading="paymentLoading"
          class="pay-button"
        >
          <Icon icon="ep:check" class="btn-icon" />
          {{ paymentLoading ? '处理中...' : '立即支付' }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as PayApi from '@/api/system/pay'
import { ElMessage } from 'element-plus'
import { defaultProps } from '@/utils/tree'
import * as AreaApi from '@/api/system/area'

defineOptions({ name: 'PaymentBalance' })

const { query } = useRoute()
const { replace } = useRouter()

// 响应式数据
const paymentLoading = ref(false)
const preOrderInfo = ref({
  productInfo: {},
  skuInfo: {},
  preOrderNo: '',
  usernameList: '',
  deliveryType: 1,
  wallet: 0,
  totalPrice: 0,
  couponPrice: 0,
  moreCouponPrice: 0,
  payPrice: 0
})

// 倒计时
const minutes = ref(9)
const seconds = ref(59)
const interval = ref(null)

// 地区列表
const areaList = ref([])

// 支付参数
const createPayParams = reactive({
  payType: 1,
  appId: 1,
  preOrderNo: null
})

const submitPayParams = reactive({
  id: null,
  channelCode: null,
  returnUrl: null
})

// 支付方式选项
const paymentOptions = ref([
  {
    id: 2,
    name: '支付宝支付',
    type: 'alipay_pc',
    enable: false
  },
  {
    id: 3,
    name: '微信支付',
    type: 'wx_native',
    enable: false
  }
])

// 计算属性
const canSubmit = computed(() => {
  if (createPayParams.payType == 1 && preOrderInfo.value.wallet >= preOrderInfo.value.payPrice) {
    return true
  }
  if (createPayParams.payType > 1) {
    return true
  }
  return false
})

// 获取支付图标
const getPaymentIcon = (type) => {
  const iconMap = {
    alipay_pc: 'ep:money',
    wx_native: 'ep:chat-dot-round'
  }
  return iconMap[type] || 'ep:credit-card'
}

// 获取支付图标样式类
const getPaymentIconClass = (type) => {
  const classMap = {
    alipay_pc: 'alipay-icon',
    wx_native: 'wechat-icon'
  }
  return classMap[type] || 'default-icon'
}

// 获取支付描述
const getPaymentDesc = (type) => {
  const descMap = {
    alipay_pc: '使用支付宝安全支付',
    wx_native: '使用微信安全支付'
  }
  return descMap[type] || '第三方支付'
}

// 初始化倒计时
const initCountdown = () => {
  interval.value = setInterval(() => {
    seconds.value = seconds.value - 1
    if (seconds.value == 0) {
      seconds.value = 59
      minutes.value = minutes.value - 1
    }
    if (minutes.value == 0) {
      seconds.value = 0
      clearInterval(interval.value)
      interval.value = null
      ElMessage.warning('订单已超时，请重新下单')
    }
  }, 1000)
}

// 获取预支付订单信息
const getPreOrderInfo = async (orderNo) => {
  try {
    preOrderInfo.value = await PayApi.getPreOrder(orderNo)
    if (preOrderInfo.value.deliveryType == 2) {
      areaList.value = await AreaApi.getAreaTree()
    }
    createPayParams.preOrderNo = orderNo
  } catch (error) {
    console.error('获取订单信息失败:', error)
    ElMessage.error('获取订单信息失败')
  }
}

// 获取可用支付渠道
const getChannelCodeList = async () => {
  try {
    const list = await PayApi.getEnableCodeList(1)
    paymentOptions.value.forEach((element) => {
      if (list.indexOf(element.type) != -1) {
        element.enable = true
      }
    })
  } catch (error) {
    console.error('获取支付渠道失败:', error)
  }
}

// 创建支付订单
const onCreatePayOrder = async () => {
  paymentLoading.value = true
  try {
    const data = await PayApi.createOrder({ ...createPayParams })
    if (data === -1 && createPayParams.payType == 1) {
      // 钱包支付成功
      ElMessage.success('支付完成')
      replace('/user/system')
      return
    } else {
      submitPayParams.id = data
      submitPayParams.channelCode = paymentOptions.value.find(
        (v) => v.id == createPayParams.payType
      )?.type
      submitPayParams.returnUrl = window.location.href
      await onSubmitOrder()
    }
  } catch (error) {
    console.error('创建支付订单失败:', error)
    ElMessage.error('支付失败，请重试')
  } finally {
    paymentLoading.value = false
  }
}

// 提交支付
const onSubmitOrder = async () => {
  try {
    const { status, displayMode, displayContent } = await PayApi.orderSubmit({ ...submitPayParams })

    openPayRequestDialog(3000)

    if (status == 0) {
      if (displayMode == 'url') {
        window.open(displayContent)
      }
    }
  } catch (error) {
    console.error('提交支付失败:', error)
    ElMessage.error('支付提交失败')
  }
}

// 打开支付确认对话框
const openPayRequestDialog = (mills = 1000) => {
  setTimeout(() => {
    ElMessageBox.confirm('请确认是否已完成支付？', '支付确认', {
      confirmButtonText: '已支付',
      cancelButtonText: '未支付',
      type: 'info'
    })
      .then(() => {
        queryOrder()
      })
      .catch(() => {
        // 用户取消
      })
  }, mills)
}

// 查询订单状态
const queryOrder = async () => {
  try {
    const data = await PayApi.getOrderIsPaid(preOrderInfo.value.preOrderNo)
    if (data) {
      ElMessage.success('订单已支付，相关套餐将会在2分钟内生效')
      replace('/')
    } else {
      ElMessage.error('未查询到已支付订单')
    }
  } catch (error) {
    console.error('查询订单失败:', error)
    ElMessage.error('查询订单状态失败')
  }
}

// 页面初始化
onMounted(async () => {
  if (query.preOrderNo) {
    await getPreOrderInfo(query.preOrderNo)
    await getChannelCodeList()
    initCountdown()
  } else {
    ElMessage.error('缺少订单号')
    return
  }

  // 支付宝返回处理
  if (query.out_trade_no && query.method && query.method == 'alipay.trade.page.pay.return') {
    openPayRequestDialog()
  }
})

// 组件销毁时清理定时器
onUnmounted(() => {
  if (interval.value) {
    clearInterval(interval.value)
  }
})
</script>

<style lang="scss" scoped>
.payment-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

/* 页面头部 */
.payment-header {
  background: linear-gradient(135deg, #97a5e2 0%, #7db5db 100%);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  color: white;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
  }
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.header-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  backdrop-filter: blur(10px);
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.page-subtitle {
  font-size: 14px;
  margin: 0;
  opacity: 0.9;
}

/* 倒计时提醒 */
.countdown-alert {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f59e0b;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.alert-icon {
  color: #d97706;
  font-size: 20px;
}

.alert-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #92400e;
}

.countdown-time {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(217, 119, 6, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
}

.time-number {
  font-weight: 700;
  font-size: 16px;
  color: #d97706;
  min-width: 20px;
  text-align: center;
}

.time-unit {
  font-size: 12px;
  color: #92400e;
}

/* 内容区域 */
.payment-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}

/* 信息区块 */
.info-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(0, 82, 204, 0.1);
}

.section-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

/* 信息卡片 */
.info-card {
  padding: 20px 24px 24px;
}

.info-grid {
  display: grid;
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(0, 82, 204, 0.02);
  border-radius: 10px;
  border: 1px solid rgba(0, 82, 204, 0.1);
  transition: all 0.2s ease;

  &:hover {
    background: rgba(0, 82, 204, 0.05);
    border-color: rgba(0, 82, 204, 0.2);
  }
}

.item-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  flex-shrink: 0;
}

.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.item-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.item-value {
  font-size: 14px;
  color: #1f2937;
  font-weight: 600;
}

/* 价格卡片 */
.price-card {
  padding: 20px 24px 24px;
}

.price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}

.price-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.price-value {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.original-price {
  text-decoration: line-through;
  color: #9ca3af;
}

.discount-item {
  background: rgba(16, 185, 129, 0.05);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 8px 0;
}

.discount-icon {
  color: #10b981;
}

.discount-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.discount-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.discount-type {
  font-size: 12px;
  color: #059669;
}

.discount-amount {
  font-size: 14px;
  font-weight: 600;
  color: #10b981;
}

.price-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 82, 204, 0.2) 50%, transparent 100%);
  margin: 16px 0;
}

.final-price {
  background: rgba(0, 82, 204, 0.05);
  border-radius: 8px;
  padding: 16px;
  margin: 8px 0 0;
}

.pay-price {
  font-size: 20px;
  color: #0052cc;
}

/* 发货卡片 */
.delivery-card {
  padding: 20px 24px 24px;
}

.delivery-type {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(0, 82, 204, 0.02);
  border-radius: 12px;
  border: 1px solid rgba(0, 82, 204, 0.1);
}

.delivery-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.delivery-info {
  flex: 1;
}

.delivery-method {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
}

.delivery-desc {
  font-size: 13px;
  color: #6b7280;
}

.address-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.address-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
}

.address-icon {
  color: #0052cc;
  font-size: 14px;
  margin-top: 2px;
}

.address-label {
  font-size: 13px;
  color: #6b7280;
  min-width: 70px;
}

.address-value {
  font-size: 14px;
  color: #1f2937;
  font-weight: 500;
}

.address-cascader {
  flex: 1;

  :deep(.el-cascader) {
    width: 100%;
  }
}

/* 支付方式 */
.payment-methods {
  padding: 20px 24px 24px;
}
.payment-radio-group {
  display: flex;
  flex-direction: column;
  gap: 16px;

  :deep(.el-radio) {
    margin: 0;
    width: 100%;
    height: auto;

    .el-radio__input {
      display: none;
    }

    .el-radio__label {
      padding: 0;
      width: 100%;
      display: block;
    }
  }
}

.payment-option {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  transition: all 0.2s ease;
  overflow: hidden;
  background: white;
  width: 288px;

  &:hover {
    border-color: #0052cc;
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
  }

  /* 修复选中状态 */
  &:has(.el-radio.is-checked) {
    border-color: #0052cc;
    background: rgba(0, 82, 204, 0.02);
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.15);
  }
}

.payment-method {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  // width: 100%;
  min-height: 80px;

  &:hover {
    background: rgba(0, 82, 204, 0.02);
  }
}

.method-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  flex-shrink: 0;
}

.wallet-icon {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.alipay-icon {
  background: linear-gradient(135deg, #1677ff 0%, #0958d9 100%);
}

.wechat-icon {
  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
}

.default-icon {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

.method-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.method-name {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.4;
}

.method-desc {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.3;
}

.method-status {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.status-sufficient {
  color: #10b981;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 6px;
}

.status-insufficient {
  color: #ef4444;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 6px;
}

.arrow-icon {
  color: #9ca3af;
  font-size: 16px;
}

/* 支付底部 */
.payment-footer {
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0, 82, 204, 0.1);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  gap: 20px;
}

.payment-summary {
  display: flex;
  align-items: center;
  gap: 8px;
}

.summary-label {
  font-size: 16px;
  color: #6b7280;
  font-weight: 500;
}

.summary-amount {
  font-size: 24px;
  font-weight: 700;
  color: #0052cc;
}

.pay-button {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 12px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  min-width: 160px;
  box-shadow: 0 4px 16px rgba(0, 82, 204, 0.3);
  transition: all 0.2s ease;

  &:hover:not(:disabled) {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 82, 204, 0.4);
  }

  &:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
}

.btn-icon {
  margin-right: 6px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .payment-container {
    padding: 12px;
  }

  .header-content {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .countdown-alert {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .alert-content {
    flex-direction: column;
    gap: 4px;
  }

  .section-header {
    padding: 16px 20px 12px;
  }

  .info-card,
  .price-card,
  .delivery-card,
  .payment-methods {
    padding: 16px 20px 20px;
  }

  .footer-content {
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px;
  }

  .pay-button {
    width: 100%;
  }

  .delivery-type {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .payment-methods {
    padding: 16px 20px 20px;
  }
  .payment-method {
    padding: 16px;
    gap: 12px;
    min-height: 70px;
  }

  .method-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .method-name {
    font-size: 15px;
  }

  .method-desc {
    font-size: 12px;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .payment-container {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  }

  .info-section {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .section-title {
    color: #f9fafb;
  }

  .item-value,
  .price-value,
  .method-name,
  .delivery-method,
  .address-value {
    color: #e5e7eb;
  }

  .item-label,
  .price-label,
  .method-desc,
  .delivery-desc,
  .address-label {
    color: #9ca3af;
  }

  .payment-footer {
    background: rgba(30, 41, 59, 0.95);
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  .summary-label {
    color: #d1d5db;
  }
}
@media (max-width: 480px) {
  .payment-method {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 20px 16px;
  }

  .method-info {
    text-align: center;
  }

  .method-status {
    justify-content: center;
  }
}
</style>
